<template>
<div class="food-all">
  <div class="food-all-list">
    <el-form class="food-all-list-form" ref="form" :model="form" size="small">
      <h1>查询</h1>
      <el-form-item label="Food名称: ">
        <el-input style="width: 20%" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Food种类:">
        <el-select v-model="form.type" placeholder="请选择类型">
          <el-option v-for="value in typeList" :label="value.text" :value="value.value" ></el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button @click="selectByKey" type="danger" size="medium" plain>确定筛选</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="food-all-title">
    <el-divider content-position="center">Food All</el-divider>
  </div>
  <div class="food-all-content">
    <div class="food-all-content-list" v-for="(v,k) in foodList" :key="k">
      <div class="food-all-content-list-img">
        <img style="width: 100%;height: 100%;" :src=v.fimg>
      </div>
      <div class="food-all-content-list-container" style="margin-top: 10px">
        <span>{{v.fname}}</span>
        &nbsp;&nbsp;
        <span>{{v.fprice}}￥</span>
        &nbsp;&nbsp;
        <el-button @click="toDetail(v)" size="mini" type="primary" icon="el-icon-more"></el-button>
      </div>
    </div>
  </div>
</div>
</template>

<script>

export default {
  name: "ProductShowAll",
  data(){
    return{
      form: {
        name: '',
        type: ''
      },
      foodList:[],
      typeList:[]
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    toDetail(v){
      let agency = JSON.parse(sessionStorage.getItem("agency"))
      let boss = JSON.parse(sessionStorage.getItem("boss"));
      if (agency === null && boss === null){
        this.$alert('您还没有登录，请登陆后再试', '温馨提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push("/login")
          }
        });
      }else{
        if (agency === null){
          location.href = "/productManager"
        }else{
          location.href = "/agencyManager"
        }
      }
    },
    selectByKey(){
      axios({
        method:'post',
        url:'http://localhost:8081/common/selectByKey',
        data:{
          name:this.form.name,
          type:this.form.type
        }
      }).then(res => {
        this.foodList = res.data.data
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    axios({
      method:'get',
      url:'http://localhost:8081/common/getFoodAll'
    }).then(res => {
      this.foodList = res.data.data
    }).catch(err => {
      console.log(err)
    })
    axios({
      method:'get',
      url:'http://localhost:8081/common/getType'
    }).then(res => {
      console.log(res)
      this.typeList = res.data.data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>
.food-all{
  width: 100%;
  height: 100%;
}
.food-all-list{
  width: 70%;
  height: 200px;
  margin: 0 auto;
  text-align: left;
  background-color: #cad3c3;
}
.food-all-list-form{
  padding-top: 10px;
  padding-left: 30px;
}
label{
  color: white;
}
.el-divider__text{
  font-size: 25px;
  color: #126bae;
  font-family: "Microsoft YaHei UI Light";
}
.food-all-content{
  width: 78%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.food-all-content-list{
  width: 200px;
  height: 200px;
  margin: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.food-all-content-list-img{
  width: 100%;
  height: 150px;
}
</style>
